
<template>
  <div class="img">
    <div id="nav">
      <span></span>
      <span>审核</span>
      <span></span>
    </div>

    <div class="bgc">
      <div class="tabs" @click.stop>
        <span :class="{checked:state=='undone'}" @click="switchs('undone')">
          <i v-if="undoneValue>0">{{undoneValue}}</i>开发中
        </span>
        <span :class="{checked:state=='audit'}" @click="switchs('audit')">
          <i v-if="auditValue>0">{{auditValue}}</i>测试中
        </span>
        <span :class="{checked:state=='achieve'}" @click="switchs('achieve')">
          <i v-if="achieveValue>0">{{achieveValue}}</i>已完成
        </span>

        <!-- 未审核 -->
        <div class="content" v-show="state=='undone'">
          <ul>
            <li v-for="(value,index) in form" :key="index">
              <p>{{value.name}}</p>
              <van-button
                type="primary"
                size="small"
                color="#f2826a"
                id="tag"
                @click.native="get(value)"
              >提测</van-button>
            </li>
          </ul>
        </div>

        <!-- 在审核 -->
        <div class="content" v-show="state=='audit'" id="audit">
          <van-collapse v-model="activeNames">
            <van-collapse-item
              :title="item.pageName"
              :name="index"
              v-for="(item,index) in auditForm"
              :key="index"
            >
              <ul id="auditContent">
                <li>
                  <p class="projectName">审核状态</p>
                  <van-tag color="#FFD700" size="large" id="tag">审核中</van-tag>
                </li>
                <li>
                  <p>页面名称</p>
                  <i>{{item.pageName}}</i>
                </li>
                <li>
                  <p>页面ID</p>
                  <i>{{item.pageId}}</i>
                </li>
                <li>
                  <p class="time">上传时间</p>
                  <i>{{item.date}}</i>
                </li>
                <li>
                  <van-button
                    type="primary"
                    size="large"
                    style="margin: 0 auto;font-size: 20px;"
                    id="tag1"
                    @click.native="to"
                  >详情</van-button>
                </li>
              </ul>
            </van-collapse-item>
          </van-collapse>
        </div>

        <!-- 完成 -->
        <div class="content" v-show="state=='achieve'">
          <ul>
            <van-panel
              :title="value.pageName"
              status="审核完成"
              v-for="(value,index) in achieveForm"
              :key="index"
            >
              <div class="message">
                <span>成绩</span>
                <span>{{value.grade}} 分</span>
              </div>
              <div class="message">
                <span>姓名</span>
                <span>{{value.name}}</span>
              </div>
              <van-button
                type="primary"
                size="large"
                style="margin: 0 auto;font-size: 20px;"
                id="tag1"
                @click.native="to"
              >详情</van-button>
            </van-panel>
          </ul>
        </div>
      </div>
    </div>

    <Footer page="audit"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import { constants } from "crypto";
import { addproject, auditList, delproject, addexamine } from "@/API/index.js";
// import func from "../../../vue-temp/vue-editor-bridge";
export default {
  components: {
    Footer
  },
  created() {
    // auditList().then(res => {
    //   console.log(res);
    //   var arr = res.list;
    //   this.form = res.list.filter(value => {
    //     return value.status == "01";
    //   });
    //   this.auditForm = res.list.filter(value => {
    //     return value.status == "02";
    //   });
    //   this.achieveForm = res.list.filter(value => {
    //     return value.status == "03";
    //   });
    //   this.undoneValue = this.form.length;
    //   this.auditValue = this.auditForm.length;
    //   this.achieveValue = this.achieveForm.length;
    // });
    auditList().then(res => {
      console.log("res", res);
    });
  },
  data() {
    return {
      state: "undone", //状态
      undoneValue: 0, //未完成
      auditValue: 0, //审核中
      achieveValue: 0, //已完成
      activeNames: ["1"], //审核中折叠面板状态
      activeName: "未审核", //审核中的标签页状态
      form: [
        {
          name: "学生",
          userId: "5d54cf29bab8393310beea93",
          className: "web03",
          classId: "5d5542bfed95f30ca9f15311",
          projectId: "5d560a043c8e242636c78afa",
          projectName: "测试卖座PC",
          pageId: "5d562166ee584564e6114b30",
          pageName: "测试首页2",
          grade: "70",
          status: "01",
          examineId: "5d5765f7402af64a94d4b653"
        },
        {
          name: "学生",
          userId: "5d54cf29bab8393310beea93",
          className: "web03",
          classId: "5d5542bfed95f30ca9f15311",
          projectId: "5d560a043c8e242636c78afa",
          projectName: "测试卖座PC",
          pageId: "5d562166ee584564e6114b30",
          pageName: "测试首页2",
          grade: "70",
          status: "01",
          examineId: "5d5765f7402af64a94d4b653"
        }
      ], //未审核列表
      auditForm: [
        {
          name: "学生",
          userId: "5d54cf29bab8393310beea93",
          className: "web03",
          classId: "5d5542bfed95f30ca9f15311",
          projectId: "5d560a043c8e242636c78afa",
          projectName: "测试卖座PC",
          pageId: "5d562166ee584564e6114b30",
          pageName: "测试首页4",
          grade: "50",
          status: "02",
          examineId: "5d5765f7402af64a94d4b653"
        }
      ], //审核列表
      achieveForm: [
        {
          name: "学生",
          userId: "5d54cf29bab8393310beea93",
          className: "web03",
          classId: "5d5542bfed95f30ca9f15311",
          projectId: "5d560a043c8e242636c78afa",
          projectName: "测试卖座PC",
          pageId: "5d562166ee584564e6114b30",
          pageName: "测试首页3",
          grade: "90",
          status: "03",
          examineId: "5d5765f7402af64a94d4b653"
        },
        {
          name: "学生",
          userId: "5d54cf29bab8393310beea93",
          className: "web03",
          classId: "5d5542bfed95f30ca9f15311",
          projectId: "5d560a043c8e242636c78afa",
          projectName: "测试卖座PC",
          pageId: "5d562166ee584564e6114b30",
          pageName: "测试首页1",
          grade: "50",
          status: "03",
          examineId: "5d5765f7402af64a94d4b653"
        }
      ], //已完成列表
      active: ""
    };
  },
  watch: {
    auditForm: {
      handler(value, oldValue) {
        let that = this;
        let date = new Date();
        date.getFullYear();
        date.getMonth();
        date.getDate();
        date.getHours();
        var min = date.getMinutes();
        if (min < 10) {
          min = "0" + min;
        }
        this.auditForm.forEach(function(value) {
          value.date = `${date.getFullYear()}年${date.getMonth()}月${date.getDate()}日${date.getHours()}:${min}`;
        });
      },
      immediate: true,
      deep: true
    },

    state(value, oldvalue) {
      if (value == "undone") {
        this.undoneValue = "";
      }
      if (value == "audit") {
        this.auditValue = "";
      }
      if (value == "achieve") {
        this.achieveValue = "";
      }
      immediate: true;
      deep: true;
    }
  },

  methods: {
    to() {
      this.$router.push("/details");
    },
    //发送提交请求
    get() {
      addexamine(v).then(res => {
        console.log(res);
      });
    },
    showPopup() {
      this.show = true;
    },
    switchs(string) {
      this.state = string;
    }
  }
};
</script>

<style lang="less" scoped>
#nav {
  background: #ccc;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  z-index: 999;
}
.img {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: url("../../assets/img1.jpg") no-repeat center/cover;
}
.bgc {
  position: absolute;
  width: 97%;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    background: #fff;
  }
  span {
    display: block;
    flex: 1;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    position: relative;
    i {
      display: block;
      text-align: center;
      line-height: 15px;
      font-style: normal;
      color: #fff;
      font-size: 10px;
      padding: 1px 4px;
      border-radius: 48%;
      background: rgba(255, 0, 0, 0.8);
      position: absolute;
      left: 78px;
      top: 8px;
    }
  }
  span:nth-child(2) i,
  span:nth-child(2).checked::after {
    background: rgba(255, 165, 0, 0.8);
  }
  span:nth-child(3) i,
  span:nth-child(3).checked::after {
    background: rgba(0, 128, 0, 0.8);
  }
  span.checked::after {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background: red;
    position: absolute;
    left: 0;
    bottom: 0px;
  }
  .content {
    width: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 40px;
    padding: 5px 10px;

    ul {
      max-height: 250px;
      overflow: scroll;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        p {
          font-size: 14px;
          flex: 1;
          text-align: left;
          text-indent: 10px;
        }
        .van-button__text {
          line-height: 30px;
        }
        #tag {
          height: 30px;
          font-size: 12px;
        }
      }
    }
    // 已完成列表
    .message {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  #audit {
    max-height: 450px;
    overflow: scroll;
    #auditContent {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        i {
          font-style: normal;
          font-size: 14px;
        }
        #tag {
          padding: 0;
          width: 37px;
          height: 25px;
          font-size: 12px;
          line-height: 25px;
          margin-left: 3px;
        }
      }
    }
  }
}
</style>
